<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><b>事件处理程序分为：</b>
        <ol>
            <li>HTML事件处理</li>
            <li>DOM0级事件处理</li>
            <li>DOM2级事件处理</li>
            <!-- <li>IE事件处理程序</li>  被放弃了 -->
           
        </ol>
    </p>

    <!-- //HTML事件处理  缺点：HTML和JS没有分开-->
    <!-- <button onclick="clickHandle()">按钮</button>
    <script>
        function clickHandle(){
            console.log("点击了按钮");
            
        }
    </script> -->

    
    <!-- //DOM 0级事件处理   优点：HTML和JS分离的  缺点：无法同时添加多个事件-->
    <!-- <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");

        btn.onclick = function(){
            console.log("点击了1");

        btn.onclick = function(){
            console.log("点击了2");
        //点击按钮后只会显示点击了2，点击了1会被覆盖
            
        }
    </script> -->



    <!-- //DOM 2级事件处理   优点：事件不会被覆盖  缺点：写起来麻烦-->
     <button id="btn">按钮</button>
     <script>
        var btn = document.getElementById("btn");

        btn.addEventListener("click",function(){
            console.log("点击啦");
            
        })

        btn.addEventListener("click",function(){
            console.log("点击啦啦");
            
        })
     </script>
        
    

</body>
</html>